{extend name="./template/default/pc/pub/base.html" /}
{block name="seo"}
<title>用户登录-{$site_name}</title>
{/block}
{block name="css"}
<link rel="stylesheet" href="/static/css/account.css">
{/block}
{block name="content"}
<p class="account-tip">为了账号安全，注册后请尽快绑定手机</p>
<main class="container overflow-Show clearfix">
    <section class="account-box">
        <h1 class="head">登录</h1>
        <div class="left">
            <div>
                <img style="width: 90%;height: auto;" src="/static/images/forgetpwd.jpg" alt="">
            </div>
        </div>
        <div class="right">
            <div class="account-login-form">
                <div class="form-wrap">
                    <form id="form-login">
                        <p class="tip color-main"></p>
                        <p>
                            <input id="txt_username" name="username" type="text" autocomplete="off" value="" placeholder="用户名"
                                   onblur="$(this).css({outlineWidth: 5, outlineColor: '#93b5ec'});">
                        </p>
                        <p style="margin-bottom:15px;">
                            <input id="txt_password" name="password" type="password" autocomplete="off" value="" placeholder="密码">
                        </p>
                        <p>
                            <input name="captcha" type="text" placeholder="验证码" style="width:150px;">
                            <img id="captcha" src="/captcha" onclick = "this.src='/captcha?rnd=' + Math.random();">
                        </p>
                    </form>
                    <p><button class="button" onclick="login('pc')">立即登录</button></p>
                    <p class="options">
                        <label><input name="remember" type="checkbox" value="1">自动登录</label>
                        <span class="find-pwd"><a href="/recovery">忘记密码？</a></span>
                        <span class="tabs-link pull-right">
                                <a class="" href="/register" target="_blank">去注册</a>
                            </span>
                    </p>
                </div>
            </div>
        </div>
    </section>
</main>
<script>
    var regpwd = new RegExp("^[0-9A-Za-z\\-=\\[\\];,./~!@#$%^*()_+}{:?]{6,21}$");

    /**
     * 验证form表单数据
     * @param {any} action
     */
    function verifyform() {
        var $username = $("#txt_username");
        var $phone = $("txt_phone");
        var $phonecode = $("txt_phonecode");
        var $pwd = $("#txt_password");
        var $pwd1 = $("#txt_password2");
        var $tip = $(parent + " .account-login-form .tip");
        if ($phone.length>0) {
            if ($.trim($phone.val()) === "")
            {
                $phone.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" });
                ShowDialog("手机号码不填可是不行的哦~");
                return false;
            }
            if (!$phonecode || $.trim($phonecode.val()) === "") {
                $phonecode.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" });
                ShowDialog("短信验证码不填可是不行的哦~");
                return false;
            }
        }
        else {
            if (!$username || $.trim($username.val()) === "") {
                ShowDialog("账号信息不填可是不行的哦~");
                $username.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" });
                return false;
            }
        }
        if (!$pwd || $.trim($pwd.val()) === "") {
            ShowDialog("密码不填可是不行的哦~");
            $pwd.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" });
            return false;
        }
        if ($pwd1.length > 0 && $.trim($pwd1.val()) === "") {
            ShowDialog("请再次输入密码");
            $pwd1.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" });
            return false;
        }
        if ($pwd1.length > 0 && $.trim($pwd.val()) !== $.trim($pwd1.val())) {
            $tip.text("两次输入的密码不一致，请重新输入");
            $pwd.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" }).val("");
            $pwd1.val("");
            return false;
        }
        if (!regpwd.test($pwd.val())) {
            ShowDialog("密码由6-20位字母、数字和字符组成");
            $pwd.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" }).val("");
            if ($pwd1.length > 0) {
                $pwd1.val("");
            }
            return false;
        }
        return true;
    }

    function login(){
        let $username = $("#txt_username");
        let $pwd = $("#txt_password");
        let r = Math.random()
        if (!$username || $.trim($username.val()) === "") {
            ShowDialog("必须填写用户名");
            $username.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" });
            $('#captcha').attr('src','/captcha?rnd=' + r)
            return;
        }
        if (!$pwd || $.trim($pwd.val()) === "") {
            ShowDialog("必须填写密码");
            $pwd.focus().css({ outlineWidth: 1, outlineColor: "#fd113a" });
            $('#captcha').attr('src','/captcha?rnd=' + r)
            return;
        }
        $.ajax({
            type: 'POST',
            url: "/login",
            data: $('#form-login').serialize(),
            dataType: 'json',
            success: function (data) {
                var result = data;
                if (result.err == 0){ //登录成功
                    ShowDialog(result.msg);
                    setTimeout(function () {
                        location.href = '/ucenter';
                    }, 1000);
                } else {
                    $('#captcha').attr('src','/captcha?rnd=' + r)
                    ShowDialog(result.msg);
                }
            },
            error: function (data) {
                $('#captcha').attr('src','/captcha?rnd=' + r)
                ShowDialog(data.msg);
            },
        });
    }
</script>
{/block}